<script setup lang="ts">
import {ref} from "vue";
import {useRouter} from "vue-router";
const router = useRouter()
const value = ref('')
const loading = ref<boolean>(false)

const login = () => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
    router.push('/home')
  },2000)
}

</script>
<template>
  <div class="login">
    <div class="login-container">
      <div class="board">
        <div class="board-title">登录 Carroll Connect</div>
        <a-input v-model:value="value" placeholder="Account" class="board-input"/>
        <a-input v-model:value="value" placeholder="Password" class="board-input"/>
        <div class="choose">
          <a-checkbox v-model:checked="checked"><span class="choose-item">记住我的账号</span></a-checkbox>
        </div>
        <div class="divider-container">
          <a-divider class="divider"/>
        </div>
        <div class="link">
          <span class="width-line">忘记了账号或密码 </span>
          <span class="material-icons icon">north_east</span>
        </div>
        <div class="link">
          <span class="without-line">没有账号？</span>
          <span class="width-line">创建我的账号 </span>
          <span class="material-icons icon">north_east</span>
        </div>
        <a-button shape="circle" class="btn" @click="login">
          <span class="material-icons" v-if="!loading">arrow_forward_ios</span>
          <span class="material-icons loading-icon" v-if="loading">refresh</span>
        </a-button>
      </div>
    </div>
  </div>
</template>
<style lang="less" scoped>
.login {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-image: url(@/assets/image/background.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-color: rgba(255, 255, 255, .2);

  .login-container {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    backdrop-filter: blur(10px);
    position: relative;

    .board {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: #fff;
      border-radius: 15px;
      width: 400px;
      height: 500px;
      padding: 20px;


      .board-title {
        font-weight: 600;
        word-break: break-word;
        font-size: 24px;
        color: #4F4F4F;
        text-align: center;
        margin-top: 24px;
      }

      .board-input {
        width: 90%;
        border-radius: 6px;
        height: 43px;
        margin: 20px auto;
        display: block;
      }

      .choose {
        display: flex;
        justify-content: center;
        margin: 25px 0;

        .choose-item {
          //font-weight: 500;
          font-size: 14px;
          letter-spacing: 0.2px;
          word-break: break-word;
          color: #494949;
        }
      }


      .divider-container {
        width: 70%;
        margin: 0 auto 20px auto;

        .divider {

          display: block;
          margin: 0 auto;
        }
      }

      .link {
        margin-top: 10px;
        text-align: center;
        font-size: 14px;
        letter-spacing: 0.3px;
        color: #0070C9;
        cursor: pointer;
        line-height: 30px;

        .icon {
          font-size: 15px;
          //line-height: 30px;
        }

        .icon:hover {
          font-size: 14px;
          text-decoration: underline;
        }

        .without-line {
          color: #4F4F4F;
          text-decoration: none;
        }

        .without-line:hover {
          color: #4F4F4F;
          text-decoration: none;
        }

        .width-line:hover {
          text-decoration: underline;
        }
      }


      .btn {
        width: 55px;
        text-align: center;
        height: 55px;
        line-height: 58px;
        color: #4F4F4F;
        display: block;
        margin: 40px auto 10px auto;

        .loading-icon {
          animation: rotating 1s infinite;
          animation-timing-function: linear;
        }
      }
    }
  }
}

@keyframes rotating {
  100% {
    transform: rotate(360deg);
  }
}
</style>
